<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom ref="HeadCustom" :isSpace="false" :isCircle="true" :isBlur="false" :isBack="isApp" :isOpeninstall="true" :isChange="!isApp"></HeadCustom>
		
		<view class="download-wrap fboxCol Ycenter">
			<image class="bg" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.3/promotion/bg.png" mode="widthFix">
				<view class="content fboxCol Xcenter Ycenter">
					<view class="item fboxRow Ycenter">
						<image class="pic" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.3/promotion/pic1.png" mode="aspectFill"></image>
						<view class="tit">茅台酒</view>
					</view>
					<view class="item fboxRow Ycenter">
						<image class="pic" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.3/promotion/pic2.png" mode="aspectFill"></image>
						<view class="tit">188火锅 <br /> 霸王餐</view>
					</view>
					<view class="item fboxRow Ycenter">
						<image class="pic" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.3/promotion/pic3.png" mode="aspectFill"></image>
						<view class="tit">火锅底料</view>
					</view>
					<view class="tips font28">
						部分奖品数量有限，抽完即止, <br />
						活动解释权归本无网络科技有限公司所有
					</view>
					<image class="mark" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.3/promotion/mark.png" mode="heightFix"></image>
					<view class="min-tips fboxRow Ycenter Xcenter">本活动及所有奖品与苹果公司无关</view>
				</view>
				
				<view class="btn-fixed">
					<image class="bottom-bg" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.3/promotion/bg-bottom.png" mode="aspectFill"></image>
					<template v-if="!isApp">
						<DownloadBtn type="img"  :isOpeninstall="true" :img-url="imgUrl" img-style="width:548rpx;height:136rpx;"
						ref="download_btn" />
					</template>	
					<view v-else class="btn-back fboxRow Ycenter Xcenter font32" @click="goBack()">返回</view>
				</view>		
				<!-- <view class="btn color-fff font30 fboxRow Ycenter Xcenter" @click="goCopy" v-else>
				点击复制链接在浏览器中打开
			</view> -->
		</view>
	</view>
</template>

<script>
	import DownloadBtn from '@/components/download-btn-h5/download_btn.vue';
	export default {
		components: {
			DownloadBtn
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				// url: '',
				isApplet: false,
				isApp: false,
				// imgUrl: 'https://ebc-prod.cdn.benwunet.com/uni-static/download/btn.png'
				imgUrl: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.3/promotion/btn.png'
			}
		},
		onLoad(option) {
			console.log(option)
			if (option && option.isApplet) {
				this.isApplet = true;
			}
			if(option && option.isApp){
				this.isApp = true;
			}
			// const href = window.location.href
			// this.url = href.substr(0, href.lastIndexOf("?"))
		},
		methods: {
			goCopy() {
				uni.setClipboardData({
					data: 'hello',
					success: function() {
						console.log('success');
					}
				});
			},
			goBack(){
				this.$refs.HeadCustom.backTap()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.download-wrap {
		min-height: calc(100vh);
		background: #ff4548 no-repeat top center;
		/* background: #fff url("~@/assets/img/bg-download.jpg") no-repeat top center; */
		background-size: 750rpx 100%;
	}
    .download-wrap .btn-back {
        position: fixed;
        // bottom: 60rpx;
		bottom: 230rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 560rpx;
        height: 88rpx;
        background: #f0bd42;
        box-shadow: 0px 0px 30rpx 0px rgba(13, 32, 2, 0.2);
        border-radius: 44rpx;
        cursor: pointer;
        border:0 none;
    }

	.item {
		margin-bottom: 38rpx;
		width: 554rpx;
		height: 202rpx;
		background-color: #FFF6EF;
		color:#3B3934;
		font-weight: bold;
		font-size: 40rpx;
		border-radius: 20rpx;
		line-height: 1.2;
	}

	.pic {
		width: 268rpx;
		height: 202rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
	}

	.bg {
		width: 750rpx;
		height: auto;
	}

	.content {
		position: absolute;
		left: 98rpx;
		top: 395rpx;
	}

	.content .tips {
		padding: 10rpx 0 0;
		width: 554rpx;
		font-size: 28rpx;
		color: #FFF6EF;
		text-align: center;
		line-height: 1.2;
	}
	// .mark{ margin-top: 40rpx; width: 554rpx; white-space: nowrap; font-size: 38rpx;text-align: center;font-weight: bold;color: #E53C2E;line-height: 48rpx;
	// -webkit-text-stroke: 3rpx #F5DA9B;text-stroke: 3rpx #F5DA9B;
	// }
	.mark{margin-top: 40rpx;width: 554rpx;height: 48rpx;}
	.content .min-tips{margin-top: 150rpx; width: 554rpx;color:#F9E1E0;font-size: 20rpx;opacity: 0.6;}
	.download-wrap .btn-fixed {
		position: fixed;
		left: 0;right: 0;
		bottom: 0;
		z-index: 6;
	}
	.btn-fixed .bottom-bg{position: absolute;left: 0; width: 750rpx; height: 427rpx;bottom: 0;}
	.btn-fixed .min-tips{color:#F9E1E0;position: absolute;left: 0;bottom: 180rpx;font-size: 20rpx; width: 750rpx;opacity: 0.6;}
	.btn-fixed /deep/ .btn-img{bottom: 200rpx;}
</style>